<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic Layout - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="./easyui-1.9.15/themes/material/easyui.css">
    <link rel="stylesheet" type="text/css" href="./easyui-1.9.15/themes/icon.css">
    <script type="text/javascript" src="./easyui-1.9.15/jquery.min.js"></script>
    <script type="text/javascript" src="./easyui-1.9.15/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
		<!-- 上 北：顶部布局 -->
        <div data-options="region:'north'" style="height:50px">
			LOGO
		</div>
		<!-- 下 南： 底部布局 -->
        <div data-options="region:'south',split:true" style="height:50px;">
			COPYRIGHT
		</div>
		<!-- 右 东：右边布局 -->
        <div data-options="region:'east',split:true" title="East" style="width:200px;"></div>
		<!-- 左 西： 左边布局 -->
        <div data-options="region:'west',split:true" title="West" style="width:200px;">
			<!-- 左边导航 -->
			<div class="easyui-accordion" id="leftmenu" data-options="border:false">

			    <div title="用户管理" data-options="iconCls:'{$m1.icon}'">
			        <ul>
			            <li ><a href="javascript:addTab('用户列表','./datagrid.html','')" ><span class='sub_icon'></span><span class='msub'>用户列表</span></a></li>
			            <li ><a href="javascript:addTab('新增用户','./useradd.html','')" ><span class='sub_icon'></span><span class='msub'>新增用户</span></a></li>
			        </ul>
			    </div>
				<div title="角色管理" data-options="iconCls:'{$m1.icon}'">
				    <ul>
				        <li ><a href="javascript:addTab('角色列表','./datagrid2.html','')" ><span class='sub_icon'></span><span class='msub'>用户列表</span></a></li>
				        <li ><a href="javascript:addTab('新增角色','./roleadd.html','')" ><span class='sub_icon'></span><span class='msub'>新增用户</span></a></li>				        
				    </ul>
				</div>
				<div title="菜单管理" data-options="iconCls:'{$m1.icon}'">
				    <ul>
				        <li ><a href="javascript:addTab('菜单列表','./datagrid.html','')" ><span class='sub_icon'></span><span class='msub'>用户列表</span></a></li>
				        <li ><a href="javascript:addTab('新增菜单','./menuadd.html','')" ><span class='sub_icon'></span><span class='msub'>新增用户</span></a></li>
				    </ul>
				</div>

			    <div></div>
			</div>
			
		</div>
        <div data-options="region:'center',split:false,border:false,collapsible:false">
            <div id="main_tabs" class="easyui-tabs" data-options="tools:'#tab-tools',fit:true,split:false,collapsible:false">
                 
            </div>
        </div>
    
<script type="text/javascript">
var index = 0;
function addPanel(){
	index++;
	$('#main_tabs').tabs('add',{
		title: 'Tab'+index,
		iconCls:'icon-help',
		content: '<div style="padding:10px">Content'+index+'</div>',
		closable: false
	});
}
function removePanel(){
	var tab = $('#main_tabs').tabs('getSelected');
	if (tab){
		var index = $('#main_tabs').tabs('getTabIndex', tab);
		$('#main_tabs').tabs('close', index);
	}
}

function addTab(title, href,icon){  
	var main_tabs = $('#main_tabs'); 
	 
	if (main_tabs.tabs('exists', title)){
		//如果tab已经存在,则选中并刷新该tab          
		main_tabs.tabs('select', title);  
		//refreshTab({tabTitle:title,url:href});  
	} else {  
		if (href){  
			var content = '<iframe scrolling="auto" frameborder="0"  src="'+href+'" style="width:100%;height:100%"></iframe>';  
		} else {  
			var content = '更新中。。。';  
		}  
		main_tabs.tabs('add',{  
			title:title,  
			closable:true,  
			content:content,  
			iconCls:icon
		});  
	}  
}  	

$(function(){
	//初始化綁定雙擊事件
	$('#main_tabs').tabs('bindDblclick', function(index, title){
		removePanel();
	});
	//初始化加載首頁
	addTab("首页","./home.html","icon-meter");
});

$.extend($.fn.tabs.methods, {
	/**
	 * 绑定双击事件
	 * @param {Object} jq
	 * @param {Object} caller 绑定的事件处理程序
	 */
	bindDblclick: function(jq, caller){
		return jq.each(function(){
			var that = this;
			$(this).children("div.tabs-header").find("ul.tabs").undelegate('li', 'dblclick.tabs').delegate('li', 'dblclick.tabs', function(e){
				if (caller && typeof(caller) == 'function') {
					var title = $(this).text();
					var index = $(that).tabs('getTabIndex', $(that).tabs('getTab', title));
					caller(index, title);
				}
			});
		});
	},
	/**
	 * 解除绑定双击事件
	 * @param {Object} jq
	 */
	unbindDblclick: function(jq){
		return jq.each(function(){
			$(this).children("div.tabs-header").find("ul.tabs").undelegate('li', 'dblclick.tabs');
		});
	}
});

</script> 
</body>
</html>